<div id="content_header">
  <h3>Invoice / Receipt</h3>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
    <!-- <h3>Unpaid Payment</h3> -->
    <form class="form-vertical" ng-submit="searchPayments()">
      <div class="input-group">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Search For ({{ getLabelFilter(searchFor) }}) <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <!-- SEARCH KEY -->
            <li role="presentation" class="dropdown-header"><strong>Search Key</strong></li>
            <li ng-class="{active: searchFor==='received_from'}">
              <a href ng-click="searchFor='received_from'">Payer Name</a>
            </li>
            <li ng-class="{active: searchFor==='transaction_number'}">
              <a href ng-click="searchFor='transaction_number'">Transaction Number</a>
            </li>
          </ul>
        </div>
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Order By ({{ getLabelOrder(params.order_type) }}) <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <!-- PAYMENT TYPE -->
            <li ng-class="{active: params.order_type === 'DESC'}">
              <a href ng-click="orderUnpaid('DESC')">Newest First</a>
            </li>
            <li ng-class="{active: params.order_type === 'ASC'}">
              <a href ng-click="orderUnpaid('ASC')">Oldest First</a>
            </li>
          </ul>
        </div>
        <input class="form-control" type="text" name="keyword" placeholder="Type Name to search" ng-model="keyword">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">Search</button>
        </span>
      </div>
    </form>
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <tabset>
      <tab heading="Invoices ({{ (invoices.isLoading) ? 'Loading Data...' : invoices.totalItems }})">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th class="text-center">Transaction Number</th>
              <th class="text-center">Received From</th>
              <th class="text-center">Payment Status</th>
              <th class="text-center">Amount</th>
              <th class="text-center">Discount</th>
              <th class="text-center">Total</th>
              <th class="text-center">Payment Date</th>
            </tr>
          </thead>
          <tbody>
            <tr dir-paginate="payment in invoices.items | itemsPerPage: pagesize" total-items="invoices.totalItems" pagination-id="invoice_pagination_id">
              <td>
                <span class="dropdown">
                  <a href class="dropdown-toggle">
                    {{ payment.TransactionNumber }}
                  </a>
                  <ul class="dropdown-menu">
                    <li role="presentation" class="dropdown-header">Action</li>
                    <li ng-if="payment.PaymentStatus!==1"><a href ui-sref="payments.new({ id:payment.Id })">Pay</a></li>
                    <li ng-if="payment.PaymentStatus===1"><a href ui-sref="payments.show.print({ id:payment.Id })">Print</a></li>
                    <li><a href ui-sref="payments.show({ id:payment.Id })">View</a></li>
                    <li><a href ui-sref="payments.show.edit({ id:payment.Id })">Edit</a></li>
                  </ul>
                </span>
              </td>
              <td>{{ payment.ReceivedFrom }}</td>
              <!-- <small>{{ (payment.PaymentStatus === 1) ? (payment.TotalPayment | currency: 'Rp.') : '' }}</small> -->
              <td>{{ PaymentStatus[payment.PaymentStatus].ExtraLabel }}</td>
              <td class="text-right">{{ payment.TotalAmount | currency: 'Rp. ' }}</td>
              <td class="text-right">{{ payment.TotalDiscount | currency: 'Rp. ' }}</td>
              <td class="text-right">{{ (payment.TotalAmount - payment.TotalDiscount) | currency: 'Rp. ' }}</td>
              <td>{{ payment.PaymentDate | date: 'mediumDate' }}</td>
            </tr>
          </tbody>
        </table>
        <dir-pagination-controls on-page-change="pageInvoice(newPageNumber)" pagination-id="invoice_pagination_id" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
      </tab>
      <tab heading="Receipts ({{ (receipts.isLoading) ? 'Loading Data...' : receipts.totalItems }})">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th class="text-center">Transaction Number</th>
              <th class="text-center">Received From</th>
              <th class="text-center">Payment Status</th>
              <th class="text-center">Amount</th>
              <th class="text-center">Discount</th>
              <th class="text-center">Total</th>
              <th class="text-center">Payment Date</th>
            </tr>
          </thead>
          <tbody>
            <tr dir-paginate="payment in receipts.items | itemsPerPage: pagesize" total-items="receipts.totalItems" pagination-id="receipt_pagination_id">
              <td>
                <span class="dropdown">
                  <a href class="dropdown-toggle">
                    {{ payment.TransactionNumber }}
                  </a>
                  <ul class="dropdown-menu">
                    <li role="presentation" class="dropdown-header">Action</li>
                    <li ng-if="payment.PaymentStatus!==1"><a href ui-sref="payments.new({ id:payment.Id })">Pay</a></li>
                    <li ng-if="payment.PaymentStatus===1"><a href ui-sref="payments.show.print({ id:payment.Id })">Print</a></li>
                    <li><a href ui-sref="payments.show({ id:payment.Id })">View</a></li>
                    <li><a href ui-sref="payments.show.edit({ id:payment.Id })">Edit</a></li>
                  </ul>
                </span>
              </td>
              <td>{{ payment.ReceivedFrom }}</td>
              <!-- <small>{{ (payment.PaymentStatus === 1) ? (payment.TotalPayment | currency: 'Rp.') : '' }}</small> -->
              <td>{{ PaymentStatus[payment.PaymentStatus].ExtraLabel }}</td>
              <td class="text-right">{{ payment.TotalAmount | currency: 'Rp. ' }}</td>
              <td class="text-right">{{ payment.TotalDiscount | currency: 'Rp. ' }}</td>
              <td class="text-right">{{ (payment.TotalAmount - payment.TotalDiscount) | currency: 'Rp. ' }}</td>
              <td>{{ payment.PaymentDate | date: 'mediumDate' }}</td>
            </tr>
          </tbody>
        </table>
        <dir-pagination-controls on-page-change="pageReceipt(newPageNumber)" pagination-id="receipt_pagination_id" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
      </tab>
    </tabset>
  </div>
</div>